<template>
  <div class="container">
    <van-tabs color="#E6648C" :active="tab_index" sticky @change="changeTab" animated>
      <van-tab title="全部订单" />
      <van-tab title="待付款" />
      <van-tab title="待发货" />
      <van-tab title="已发货" />
      <van-tab title="已完成" />
      <van-tab title="已关闭" />
    </van-tabs>
      <div class="body">
        <div class="order" v-for="(item, index) in orders" :index="index" :key="index" @click="onDetail(item)">
          <div class="order-line">
            <p>订单号：{{item.no}}</p>
            <p>下单时间：{{item.submitted_at}}</p>
          </div>
          <van-card v-for="(ditem, detdex) in item.detail" :index="detdex" :key="ditem.product_id" :num="ditem.amount" :desc="ditem.sku_name" :price="ditem.price" :title="ditem.product_title" :thumb="ditem.product_image + '?imageView2/1/w/120/h/120/q/75'">
          </van-card>
          <div class="total-money">
            总计 <span>￥{{item.money}}</span>
          </div>
        </div>
      </div>
          <van-row v-if="emptyStatus">
       <van-col span="24">
         <div class="empty">
        <img  src="../../../static/images/empty-orders.png">
         </div>
       </van-col>
    </van-row>
    <van-toast id="van-toast" />
  </div>
</template>

<script>
import Toast from 'vant-weapp/dist/toast/toast'
import * as OrderActions from '@/api/order'

export default {
  data () {
    return {
      orders: null,
      emptyStatus: false,
      start: 0,
      tab_index: null,
      order_status: 0 // 默认全部订单
    }
  },
  methods: {
    changeTab (event) {
      wx.showNavigationBarLoading()
      this.tab_index = event.mp.detail.index
      switch (this.tab_index) {
        case 0:
          this.order_status = 0
          break
        case 1:
          this.order_status = 2
          break
        case 2:
          this.order_status = 3
          break
        case 3:
          this.order_status = 4
          break
        case 4:
          this.order_status = 5
          break
        case 5:
          this.order_status = 6
          break
        case 6:
          this.order_status = 7
          break
      }
      this.start = 0
      this.fetchOrders()
    },
    // 1-待付款, 2- 待发货, 3-已发货, 4-已完成 0-全部订单
    transStatus () {
      this.tab_index = this.$root.$mp.query.status
      switch (this.$root.$mp.query.status) {
        case '0':
          this.order_status = 0
          break
        case '1':
          this.order_status = 2
          break
        case '2':
          this.order_status = 3
          break
        case '3':
          this.order_status = 4
          break
        case '4':
          this.order_status = 5
          break
      }
      this.fetchOrders()
    },
    onDetail (item) {
      wx.navigateTo({ url: '../order/detail?id=' + item.id })
    },
    fetchOrders () {
      this.emptyStatus = false
      this.orders = []
      this.start = 0
      let params = {
        start: this.start,
        status: this.order_status
      }
      OrderActions.list(params)
        .then(data => {
          wx.hideNavigationBarLoading()
          if (data.length > 0) {
            data.map(item => {
              this.start = item.id
              this.orders.push(item)
            })
          } else {
            this.emptyStatus = true
          }
        })
        .catch(err => Toast(err.msg))
    }
  },
  onLoad () {
    wx.showNavigationBarLoading()
    this.transStatus()
  },
  onPullDownRefresh () {
    wx.showNavigationBarLoading()
    this.transStatus()
    wx.stopPullDownRefresh()
  }
}
</script>

<style lang="less" scoped>
@theme-red: #E6648C;

.container {
  min-height:1445rpx;
  background:#f8f8f8;
  overflow-y:auto;
  overflow-x:hidden;
  ::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
  }
   .empty {
    margin-top: 100rpx;
    display: flex;
    justify-content: center;
    img {
      width:400rpx; 
      height:335rpx;
    }
  }
  .body {
    width: 100%;
    overflow-y: auto;
    .order {
      background:#ffffff;
      margin-top:20rpx;
       .order-line {
      color: #666;
      font-size: 24rpx;
      padding: 10rpx 30rpx;
    }
    .total-money {
      margin: 5px 0;
      color: #666;
      font-size: 12px;
      padding: 10rpx 30rpx;
      span {
        font-size: 14px;
        color: @theme-red;
      }
    }
    }
  }
}
</style>

